<template>
  <HeaderSection
    :button-image="mdiIcon.searchIcon"
    :is-home="true"
    title="相册"
  ></HeaderSection>
  <FloatButton :menu-items="menuItems" @item-click="handleMenuClick" />
  <CategoryGrid :categories="catStore.categoryList" @item-click="handleCategoryClick" />
</template>

<script setup>
import HeaderSection from "@/components/HeaderSection.vue";
import FloatButton from "@/components/FloatButton.vue";
import { mdiIcon } from "@/store/mdiIconStore";
import { onMounted, ref } from "vue";
import { useEmojiStore } from "@/store/emojiStore";
import { useCategoryStore } from "@/store/categoryStore";
import CategoryGrid from "@/components/CategoryGrid.vue";
import router from "@/router";

const emojiStore = useEmojiStore();
const catStore = useCategoryStore();
const menuItems = ref([
  { id: 1, text: "导入表情包" },
  { id: 2, text: "读取表情包列表" },
  { id: 3, text: "新建分类" },
  { id: 4, text: "读取分类列表" },
  { id: 5, text: "删除所有表情包" },
]);

const handleMenuClick = (item) => {
  switch (item.id) {
    case 1:
      emojiStore.pickEmoji();
      break;
    case 2:
      emojiStore.readEmojiList();
      break;
    case 3:
      catStore.newCategory("新分类");
      break;
    case 4:
      catStore.readCatList();
      break;
    case 5:
      emojiStore.deleteAllEmoji();
      break;
  }
};

function handleCategoryClick(category){
  localStorage.setItem('albumData',JSON.stringify(category))
  router.push('/album')
}
</script>

<style scoped>
</style>
